<!-- home -->
<template>
  <div class="project-container">
    <div style="margin-top: 40px;">
      <van-row justify="space-around" type="flex">
        <van-col span="10">
          <van-row justify="space-around" type="flex">
            <van-col>
              <span>累计保费(元)</span>
            </van-col>
          </van-row>
          <van-row justify="space-around" type="flex">
            <van-col>
              <span>20000.03</span>
            </van-col>
          </van-row>
        </van-col>
        <van-col></van-col>
        <van-col span="10">
          <van-row justify="space-around" type="flex">
            <van-col>
              <span>满期保费(元)</span>
            </van-col>
          </van-row>
          <van-row justify="space-around" type="flex">
            <van-col>
              <span>20000.03</span>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </div>
    <div style="margin-top: 20px;">
      <van-row justify="space-around" type="flex">
        <van-col span="8">
          <van-row justify="space-around" type="flex">
            <van-col>
              <span>已决赔付(元)</span>
            </van-col>
          </van-row>
          <van-row justify="space-around" type="flex">
            <van-col>
              <span>23222.03</span>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="8">
          <van-row justify="space-around" type="flex">
            <van-col>
              <span>未决赔付(元)</span>
            </van-col>
          </van-row>
          <van-row justify="space-around" type="flex">
            <van-col>
              <span>23222.03</span>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="8">
          <van-row justify="space-around" type="flex">
            <van-col>
              <span>满期赔付(元)</span>
            </van-col>
          </van-row>
          <van-row justify="space-around" type="flex">
            <van-col>
              <span>23222.03</span>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </div>
    <div style="margin-top: 40px;">
      <van-tabs v-model="premiumActiveName" :before-change="beforeChange">
        <van-tab title="保费收入" name="income">
          <van-row>
            <van-col offset="1">
              <span>保费累计：121212</span>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="24">
              <canvas id="myChart"></canvas>
            </van-col>
          </van-row>
        </van-tab>
        <van-tab title="赔款支出" name="pay">
          <van-row>
            <van-col span="24">
              <canvas id="payChart"></canvas>
            </van-col>
          </van-row>
        </van-tab>
      </van-tabs>
    </div>
    <div style="margin-top: 40px;"></div>
  </div>
</template>

<script>
// const F2 = require('@antv/f2')
const F2 = require('@antv/f2/lib/index')
export default {
  data () {
    return {
      value: '',
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showPicker: false,
      showQuery: false,
      premiumActiveName: 'income'
    }
  },
  mounted () {
    this.showIncomeChar()
  },
  computed: {},
  methods: {
    onConfirm (value) {
      this.value = value
      this.showPicker = false
      this.showQuery = true
    },
    showProduct () {
      this.showPicker = true
    },
    beforeChange (index) {
      if (index === 'pay') {
        this.showPayChar()
      }
    },
    showIncomeChar () {
      this.$nextTick(() => {
        const data = [
          {
            date: '2017-06-05',
            value: 116
          },
          {
            date: '2017-06-06',
            value: 129
          },
          {
            date: '2017-06-07',
            value: 135
          }
        ]
        const chart = new F2.Chart({
          id: 'myChart',
          pixelRatio: window.devicePixelRatio
        })

        chart.source(data, {
          value: {
            tickCount: 3,
            min: 0
          },
          date: {
            type: 'timeCat',
            range: [0, 1],
            tickCount: 3
          }
        })
        chart.tooltip({
          custom: true,
          showXTip: true,
          showYTip: true,
          snap: true,
          crosshairsType: 'xy',
          crosshairsStyle: {
            lineDash: [2]
          }
        })
        chart.axis('date', {
          label: function label (text, index, total) {
            const textCfg = {}
            if (index === 0) {
              textCfg.textAlign = 'left'
            } else if (index === total - 1) {
              textCfg.textAlign = 'right'
            }
            return textCfg
          }
        })
        chart.line().position('date*value')
        chart.render()
      })
    },
    showPayChar () {
      debugger
      this.$nextTick(() => {
        const data = [
          {
            date: '2017-06-05',
            value: 116
          },
          {
            date: '2017-06-06',
            value: 129
          },
          {
            date: '2017-06-07',
            value: 135
          }
        ]
        const chart = new F2.Chart({
          id: 'payChart',
          pixelRatio: window.devicePixelRatio
        })

        chart.source(data, {
          value: {
            tickCount: 3,
            min: 0
          },
          date: {
            type: 'timeCat',
            range: [0, 1],
            tickCount: 3
          }
        })
        chart.tooltip({
          custom: true,
          showXTip: true,
          showYTip: true,
          snap: true,
          crosshairsType: 'xy',
          crosshairsStyle: {
            lineDash: [2]
          }
        })
        chart.axis('date', {
          label: function label (text, index, total) {
            const textCfg = {}
            if (index === 0) {
              textCfg.textAlign = 'left'
            } else if (index === total - 1) {
              textCfg.textAlign = 'right'
            }
            return textCfg
          }
        })
        chart.line().position('date*value')
        chart.render()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.index-container {
}
</style>
